<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
 <script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
</head>
<style>	
   div{width: 300px; height: 200px; background-color: lightblue; }
</style>
<script>
    function f1(){
      //$('div').hide(4000,function(){
      //$('div').fadeOut(4000,function(){
      $('div').slideUp(4000,function(){
      
       alert ('我消失了');

      });
    }
    function f2(){
  
     //$('div').show(4000,function(){
       $('div').slideDown(4000,function(){
       alert('我又出现了');
    
      });
    }
    function f3(){

      //$('div').toggle(2000);
      $('div').slideToggle(2000);

    }
</script>
<body>
 <h2>基本动画效果</h2>
  <div>Today is monday!!!</div>
  <input type="button" value="隐藏" onclick="f1()">
  <input type="button" value="显示" onclick="f2()">
  <input type="button" value="开关切换" onclick="f3()">	
</body>
</html>